<!-- <template>
	<div id="search">
		<div class="first">
			<input type="text"  /><i class="fa fa-search"></i>
		</div>
		<div class="second">
			<p>电影/电视剧/综艺</p>
		</div>
		<div class="third">
			<div class="left">
				<img src="../../public/images/001.png" >
			</div>
			<div class="right">
				<div class="one">
					<p>机械师2</p>
					<p>剧情，喜剧，犯罪</p>
					<p>2020-6-30</p>
				</div>
				<div class="two">8.9</div>
				
			</div>
			
		</div>
			
	</div>
	
</template>

<script>
	export default{
		name:"search",
		methods:{
			getsearch()
		}
	}
</script>

<style scoped>
	.first{
		width: auto;
		height: 50px;
		background-color: #f5f5f5;
		/* position: absolute; */
		position: relative;
	}
	.first input{
		width: 87.5%;
		height: 30px;
		border:1px solid #F5F5F5;
		border-radius: 5px;
		margin-left: 25px;
		margin-top: 10px;
	} 
	.fa{
		position: absolute;
		top: 35%;
		left: 10%;
	}
	.second{
		width: 100%;
		height: 40px;
		border-bottom: 3px solid #F5F5F5;
	}
	.second p{
		height: 40px;
		text-align: left;
		font-size: 18px;
		color: #989da5;
		line-height: 30px;
		font-weight: bold;
		margin-left: 5%;
		letter-spacing: 0.1em;
	}
	.third{
		width: auto;
		height: 170px;
		border-bottom: 2px dashed  #F5F5F5;
	}
	.third .left img{
		width: 15%;
		height: 120px;
		margin-left: 5%;
		margin-top: 5%;
		float: left;
	}
	
	.right{
		width: 69%;
		height: 50%;
		/* border: 1px solid red; */
		float: left;
		margin-top: 5%;
		margin-left: 5%;
	}
	.right p:first-child{
		font-size: 20px;
		font-weight: bold;
	}
	.right p:nth-child(2),.right p:nth-child(3){
		font-size: 15px;
	}
	p{
		margin-top: 2%;
		letter-spacing: 0.1em;
	}
	.one{
		width: 50%;
		height: 100%;
		/* border: 1px solid black; */
		float: left;
		font-weight: bold;
	}
	.two{
		color: orange;
		font-size: 20px;
		/* border: 1px solid green; */
		float: right;
		margin-top: 0;
		
		
		
	}
</style> -->






<template>

    <div id="Search">

        <div class="so">

            <i class="fa fa-search"></i>

            <input type="text" v-model="keyword" />

        </div>

        <div class="lei">

            <p>电影/电视剧/综艺</p >

        </div>

        <div class="dian">

            <ul>
 
            <li v-for="item in newse" :key="item.id">

                <div class="first">

<!--                     < img :src="item.img" alt=""> -->
					<img :src="item.img" alt="">

                </div>

                <div class="second">

                    <p class="title">{{item.title}}</p >

                    <p class="types font-color">{{item.types}}</p >

                    <p class="font-color">{{item.time}}</p >

                </div>

                <div class="third">

                    <p>{{item.fen}}</p >

                </div>

            </li>

            </ul>

        </div>

    </div>

</template>


<script>

    export default{

        data(){

            return{

                keyword:"",

                newsearch:[]

                

            }},

        methods: {

            getsearchData() {

                var that = this;

                axios.get('/mock/newsearch.json')

                    .then(function(response) {

                        console.log(response);

                        if(response.status == 200){

                            if(response.data && response.data.newsearch){

                                that.newsearch = response.data.newsearch;

                            }

                        }

                    })

                    .catch(function(error) {

                        console.log(error);

                    });

            }

        },

        created() {

            this.getsearchData();

        },

        computed:{

            "newse"(){

                if(this.keyword==""){

                    return this.newsearch;

                }else{

                    return this.newsearch.filter(item=>{

                        return !item.title.indexOf(this.keyword)

                    })

                }

            }

        }

            

        

    }

</script>


<style scoped>
#Search{
	width: 100%;
	padding-right: 50px;
}
img{
	width: 80px;
}
.so{
	height: 50px;
	background-color: #f5f5f5;
	border-bottom: 1px solid #f5f5f5;
}
input{
	width: 90%;
	height: 60%;
	margin: 7px;
	
}
.lei{
	height: 90px;
	font-size: 18px;
	color: #989da5;
	font-weight: bold;
	border-bottom: 1px solid #f5f5f5;
}
.lei p{
	margin: 8px;
}
.dian div{
	float: left;
}
.first{
	width: 25%;
	margin-bottom: 8px;
}
  .second{
	width: 85%;
}
.types{
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	}
.third{
	width: 15%;
	margin-top: 5px;
	
}
li{
	overflow:hidden;
	margin: 10px;
	border-bottom: 1px dotted #f5f5f5;
	}
	.title{
		font-size: 18px;
		font-weight: bold;
	}
	p{
		line-height: 25px;
	}
	.font-color{
		color: #f5f5f5;
	}
	.score{
		color: #F90;
		margin-left: 5px;
		font-weight: bold;
	}
	.third p{
		color: #989DA5;
	}
</style>
